<template>
	<div>
		<div class="demo-upload-list" :style="style" v-for="item in uploadList">
			<template v-if="item.status === 'finished'">
				<img :src="item.url">
				<div class="demo-upload-list-cover">
					<Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
					<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
				</div>
			</template>
			<template v-else>
				<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
			</template>
		</div>
		<Upload v-if="multiple"
			ref="upload"
			:show-upload-list="false"
			:default-file-list="defaultList"
			:on-success="handleSuccess"
			:format="['jpg','jpeg','png']"
			:max-size="2048"
			:on-format-error="handleFormatError"
			:on-exceeded-size="handleMaxSize"
			:before-upload="handleBeforeUpload"
			multiple
			type="drag"
			:action="uploadUrl"
			:style="'display:inline-block;width:'+(this.width-2)+'px;'">
			<div :style="'width: '+(this.width-2)+'px;height:'+(this.height-2)+'px;line-height:'+(this.height-2)+'px;'">
				<Icon type="ios-camera" size="20"></Icon>
				<p>{{label}}</p>
			</div>
		</Upload>
		<Upload v-else
			ref="upload"
			:show-upload-list="false"
			:default-file-list="defaultList"
			:on-success="handleSuccess"
			:format="['jpg','jpeg','png']"
			:max-size="2048"
			:on-format-error="handleFormatError"
			:on-exceeded-size="handleMaxSize"
			:before-upload="handleBeforeUpload"
			type="drag"
			:action="uploadUrl"
			:style="'display:inline-block;width:'+(this.width-2)+'px;'">
			<div :style="'width: '+(this.width-2)+'px;height:'+(this.height-2)+'px;line-height:'+(this.height-2)+'px;'">
				<Icon type="ios-camera" size="20"></Icon>
				<p>{{label}}</p>
			</div>
		</Upload>
		<Modal ref='modal' title="查看大图" v-model="visible" class-name="index">
			<img :src="imgUrl" v-if="visible" style="width: 100%;">
		</Modal>
	</div>
</template>
<script>
	import {FILE_UPLOAD_URL, deleteFileByPath} from '../../api/file.js'

    export default {
		name: 'cupload',
		props: {
			uploadUrl: {type: String, default: FILE_UPLOAD_URL},
			label: {type: String, default: '上传图片'},
			multiple: {type: Boolean},
			width:{type:Number,default:60},
			height:{type:Number,default:60},
			defaultList:{type:Array}
		},
        data () {
            return {
                imgUrl: '',
                visible: false,
				//对外部提供图片的访问
                uploadList: []
            }
        },
		computed:{
			style:function(){
				return 'width:'+this.width+'px;'+'height:'+this.height+'px;'+'line-height:'+this.height+'px;'
			}
		},
        methods: {
            handleView (url) {
                this.imgUrl = url;
                this.visible = true;
				this.$nextTick(function() {
					this.$refs.modal.footerHide = true;
				})
            },
            handleRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
				//删除服务器图片
				deleteFileByPath(file.name).then(res => {
					console.log(res.code)
					//向父组件传值，单传模式正确 v-model
					this.$emit('input', null)
				}).catch(err => {
					console.log(err)
				})
            },
            handleSuccess (res, file) {
				//该方法执行时，上传已结束，这里唯一要设置的就是图片的url，
				//默认对象没有这个属性。而且这个file对象已经添加进了
				//upload对象的属性fileList中了，不需要手动再添加了
				file.url = res.data.url
				file.name = res.data.path
				//只允许传一张，多传后面的覆盖前面的图片
				if (!this.multiple) {
					//清空已经添加的文件，再重新赋值新上传的文件，文件始终为一个
					this.$refs.upload.fileList.length = 0
					this.$refs.upload.fileList[0] = file
				}
				//把数据传给绑定的父组件属性，只限于单传模式 v-model,只是单向传递
				this.$emit('input', this.uploadList[0].url)
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: 'Up to five pictures can be uploaded.'
                    });
                }
                return check;
            }
        },
        mounted () {
            this.uploadList = this.$refs.upload.fileList;
        }
    }
</script>
<style scoped="scoped">
    .demo-upload-list{
        display: inline-block;
        text-align: center;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
	.index{
		z-index: 2000;
	}
</style>
